<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>${d.title}</title>
<link href="./style.css" rel="stylesheet" />
<script src="./vue.js"></script>
<script src="./data.js"></script>
</head>
<body>
<div id="app" class="root" :class="{hasSide: sideShow}">
  <div class="side">
    <h1 class="title">{{blog.title}}</h1>
    <ul>
      <li v-for="it, id in blog.post"><a @click="key = id" v-html="it.title" :class="{active: key == id }"></a></li>
    </ul>
  </div>
  <div class="head">
    <svg @click="hold" style="width: 20px; height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1747"><path d="M134.095238 256C147.560466 256 158.476191 246.448741 158.476191 234.666667 158.476191 222.884592 147.560466 213.333333 134.095238 213.333333L36.571428 213.333333C23.1062 213.333333 12.190476 222.884592 12.190476 234.666667 12.190476 246.448741 23.1062 256 36.571428 256L134.095238 256ZM134.095238 533.333333C147.560466 533.333333 158.476191 523.782074 158.476191 512 158.476191 500.217926 147.560466 490.666667 134.095238 490.666667L36.571428 490.666667C23.1062 490.666667 12.190476 500.217926 12.190476 512 12.190476 523.782074 23.1062 533.333333 36.571428 533.333333L134.095238 533.333333ZM134.095238 810.666667C147.560466 810.666667 158.476191 801.115407 158.476191 789.333333 158.476191 777.55126 147.560466 768 134.095238 768L36.571428 768C23.1062 768 12.190476 777.55126 12.190476 789.333333 12.190476 801.115407 23.1062 810.666667 36.571428 810.666667L134.095238 810.666667ZM987.428572 256C1000.893801 256 1011.809523 246.448741 1011.809523 234.666667 1011.809523 222.884592 1000.893801 213.333333 987.428572 213.333333L280.380951 213.333333C266.915725 213.333333 256 222.884592 256 234.666667 256 246.448741 266.915725 256 280.380951 256L987.428572 256ZM993.52381 533.333333C1006.989037 533.333333 1017.904762 523.782074 1017.904762 512 1017.904762 500.217926 1006.989037 490.666667 993.52381 490.666667L286.47619 490.666667C273.010963 490.666667 262.095238 500.217926 262.095238 512 262.095238 523.782074 273.010963 533.333333 286.47619 533.333333L993.52381 533.333333ZM996.571428 810.666667C1010.036657 810.666667 1020.952382 801.115407 1020.952382 789.333333 1020.952382 777.55126 1010.036657 768 996.571428 768L289.52381 768C276.058581 768 265.142857 777.55126 265.142857 789.333333 265.142857 801.115407 276.058581 810.666667 289.52381 810.666667L996.571428 810.666667Z" p-id="1748"></path></svg>
  </div>
  <div class="main">
    <div class="title" v-html="post.title"></div>
    <div class="attr">
      <span>时间：{{post.date}}</span>
      <span v-if="post.cate">分类: {{post.cate}}</span>
      <span v-if="post.tags.length">标签：{{post.tags.join(' ')}}</span>
      <span v-if="post.link"><a :href="post.link" target="_blank">原文</a></span>
    </div>
    <div class="content" v-html="post.content"></div>
  </div>
 <div class="foot">
    <span class="prev" @click="prev" v-html="key > 0 ? blog.post[key - 1].title : ''"></span>
    <span class="next" @click="next" v-html="key < len - 1 ? blog.post[key + 1].title : ''"></len></span>
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      key: 0,
      len: blog.post.length,
      blog: blog,
      sideShow: true
    }
  },
  mounted() {
    this.resize()
    window.onresize = this.resize
  },
  watch: {
    key() {
      window.scrollTo(0, 0)
    }
  },
  computed: {
    post() {
      return this.blog.post[this.key]
    }
  },
  methods: {
    hold() {
      this.sideShow = !this.sideShow
    },
    prev() {
      this.key = this.key > 0 ? this.key - 1 : 0
    },
    next() {
      this.key = this.key < this.len - 1 ? this.key + 1 : this.key
    },
    resize() {
      if (window.innerWidth < 845) {
        this.sideShow = false 
      } else {
        this.sideShow = true 
      }
    }
  }
})
</script>
</body>
</html>